﻿@page "/Skeleton"

@using FluentUI.Demo.Shared.Pages.Skeleton.Examples

<PageTitle>@App.PageTitle("Skeleton")</PageTitle>

<style>
    fluent-card {
        --card-width: 500px;
        --card-height: auto;
    }

    .card-padding {
        padding: 20px;
    }
</style>

<h1>Skeleton</h1>

<p>
    The <code>&lt;FluentSkeleton&gt;</code> component is used as a visual placeholder for an element while it is in a loading state and
    usually presents itself as a simplified wireframe-like version of the UI it is representing.
</p>
<p>
    <code>&lt;FluentSkeleton&gt;</code> wraps the <code>&lt;fluent-skeleton&gt;</code> element, a web component implementation of a radio element leveraging the
    Fluent UI design system.
</p>

<h2 id="example">Examples</h2>

<fluent-design-system-provider background-color="#f7f7f7" use-defaults>
    <DemoSection Title="Element blocks" Component="@typeof(SkeletonElementBlocks)"></DemoSection>

    <DemoSection Title="Element blocks with shimmer effect" Component="@typeof(SkeletonShimmer)" CollocatedFiles="@(new [] {"css"})">
        <p>
            This example uses an isolated CSS file to define margins.
        </p>
    </DemoSection>

    <DemoSection Title="Using SVG via Pattern attribute" Component="@typeof(SkeletonPatternSVG)"></DemoSection>

    <DemoSection Title="Using inline SVG" Component="@typeof(SkeletonInlineSVG)"></DemoSection>
</fluent-design-system-provider>

<h2 id="documentation">Documentation</h2>

<ApiDocumentation Component="typeof(FluentSkeleton)" />
